<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹出功能实现</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- JQuery操作动画
		     show()         功能：显示效果  本质：display：block
			 hide()         功能：显示效果  本质：display：block
			 
			 slideDown()    功能：向下（滑动式）效果
			 slideUp()      功能：向上（滑动式）效果
			 
			 fadeIn(毫秒数)  功能：淡入  本质：显示+透明度  0~1
			 fadeOut(毫秒数) 功能：淡出  本质：隐藏+透明度  0~1
		-->
		<style>
			div{
				width: 500px;
				height: 500px;
				background: #aaaaff;
				display: block;
			}
		</style>
	</head>
	<body>
		<button id="show">显示按钮</button>
		<button id="hide">隐藏按钮</button>
		<button id="down">滑动式向下按钮</button>
		<button id="up">滑动式向上按钮</button>
		<button id="in">淡入按钮</button>
		<button id="out">淡出按钮</button>
		<div></div>
		<script>
			/* JQ动画：显示与隐藏 */
			$("#show").click(function(){
				//隐藏  css属性直接给元素设置
				$("div").show();
			});
			$("#hide").click(function(){
				//隐藏  css属性直接给元素设置
				$("div").hide();
			});
			$("#down").click(function(){
				//隐藏  css属性直接给元素设置
				$("div").slideDown();
			});
			$("#up").click(function(){
				//隐藏  css属性直接给元素设置
				$("div").slideUp();
			});
			$("#in").click(function(){
				//隐藏  css属性直接给元素设置
				$("div").fadeIn(1000);
			});
			$("#out").click(function(){
				//隐藏  css属性直接给元素设置
				$("div").fadeOut(1000);
			});
			
			
			
			 // $("button").click(function(){
			 // 	//隐藏  css属性直接给元素设置
			 // 	$("div").css("display","block").css("border-radius","50%").css("background","#ff557f");
			 // });
		</script>
	</body>
</html>